<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.global.js"></script>
</head>

<body>

    <!-- #app下的DOM结构即为根组件的模板(template) -->
    <div id="app">
        <ol>
            <!-- 渲染多个todo子组件 -->
            <!-- v-bind 代表为每个todo子组件绑定一个【动态的】props 属性名item 属性值为td -->
            <todo-item v-for="td in list" v-bind:item="td"></todo>
        </ol>
    </div>

    <script>
        // 定义子组件
        const TodoItem = {
            // 定义接收父组件传入的哪些属性（props）
            props:["item"],

            // 子组件的模板（DOM）
            template: `<li>{{item.text}}</li>`
        }

        // 父组件/根组件
        const TodoList = {
            // 组件的数据闭包
            data() {
                return {
                    list: [
                        { id: 0, text: 'Vegetables' },
                        { id: 1, text: 'Cheese' },
                        { id: 2, text: 'Whatever else humans are supposed to eat' }
                    ]
                }
            },

            // 声明子组件 
            components: {
                TodoItem
            }
        }

        // 基于根组件创建应用实例
        const app = Vue.createApp(TodoList)

        // 将根组件挂载到DOM
        app.mount("#app")
    </script>

</body>

</html>